<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--    参考https://jingyan.baidu.com/article/ea24bc39f63b80da62b331cc.html-->
<!--    参考https://github.com/zc75110472/css3-music/blob/master/index.html-->
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}

        .music{width: 50px;height: 1px;margin:100px auto;position: absolute;}
        .music i{width: 4px;height: 5px;position: absolute;bottom:0;background-color: #b8334b;}
        .music i:nth-of-type(1){left:0; bottom:0}
        .music i:nth-of-type(2){left:8px;}
        .music i:nth-of-type(3){left:16px;}
        .music i:nth-of-type(4){left:24px;}
        .music i:nth-of-type(5){left:32px;}
        .music i:nth-of-type(6){left:40px;}
        .music i:nth-of-type(7){left:48px;}
        .music i:nth-of-type(8){left:56px;}
        .music i:nth-of-type(9){left:64px;}
        .music.active i:nth-of-type(1){-webkit-animation:wave 0.66s linear infinite;animation:wave 0.66s linear infinite;}
        .music.active i:nth-of-type(2){-webkit-animation:wave 0.8s linear infinite;animation:wave 0.8s linear infinite;}
        .music.active i:nth-of-type(3){-webkit-animation:wave 0.7s linear infinite;animation:wave 0.7s linear infinite;}
        .music.active i:nth-of-type(4){-webkit-animation:wave 0.5s linear infinite;animation:wave 0.5s linear infinite;}
        .music.active i:nth-of-type(5){-webkit-animation:wave 0.9s linear infinite;animation:wave 0.9s linear infinite;}
        .music.active i:nth-of-type(6){-webkit-animation:wave 1.2s linear infinite;animation:wave 1.2s linear infinite;}
        .music.active i:nth-of-type(7){-webkit-animation:wave 0.5s linear infinite;animation:wave 0.5s linear infinite;}
        .music.active i:nth-of-type(8){-webkit-animation:wave 0.9s linear infinite;animation:wave 0.9s linear infinite;}
        .music.active i:nth-of-type(9){-webkit-animation:wave 1.2s linear infinite;animation:wave 1.2s linear infinite;}
        @-webkit-keyframes wave{
            0%{height:8px}
            50%{height: 32px}
            100%{height: 12px}
        }
        @keyframes wave{
            0%{height:8px}
            50%{height: 32px}
            100%{height: 12px}
        }

        /*参考https://jingyan.baidu.com/article/f3ad7d0fa974c749c3345bff.html*/
        .circle{
            border: 1px solid #3db8da;
            width:120px;
            height:120px;
            border-radius: 60px;
        }

    </style>
</head>
<body>
<div class="music active circle">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
</div>
</body>
</html>